<template>
	<!-- 滑动刻度尺 -->
	<view class="scroll-ascale">
		<!-- 选中的横条  -->
		<view class="choose-in-wrap">
			<view class="top"></view>
			<view class="in"></view>
		</view>
		<scroll-view class="scroll-view" :scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation @scroll="bindscroll" :show-scrollbar="false" :enhanced="true">
			<!-- 标尺容器 -->
			<view class="scale-container">
				<!-- 补白 -->
				<view class="seat" />
				<view class="scale-grip" v-for="(item, index) in rulerGrid" :key="index">
					<view
						class="scale-item"
						v-for="(it, idx) in item.remainder"
						:key="idx"
						:style="{
							width: '1px',
							margin: '0px 5px',
							height: idx === 0 ? upx2px(80) : upx2px(40),
							background: idx === 0 ? '#C2C5CC' : '#DADEE6'
						}"
					>
						<view class="scale-item-number" v-if="idx === 0">{{ min + (point ? 1 : 10) * index }}</view>
					</view>
				</view>
				<!-- 补白 -->
				<view class="seat" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import debounce from './debounce.js';
import math from './math.js';
export default {
	props: {
		// 默认值
		defaultValue: {
			type: [Number, String],
			default: () => {
				return '';
			}
		},
		// 最小值
		min: {
			type: Number,
			default: () => {
				return 100;
			}
		},
		// 最大值
		max: {
			type: Number,
			default: () => {
				return 230;
			}
		},
		// 是否小数
		point: {
			type: Boolean,
			default: () => {
				return false;
			}
		}
	},
	computed: {
		rulerGrid() {
			let grid = this.grid || '';
			let remainder = this.remainder || '';
			let list = [];
			for (let i = 0; i < grid; i++) {
				let p = {
					remainder: 10
				};
				if (i == grid - 1) {
					p.remainder = remainder;
				}
				list.push(p);
			}
			return list;
		}
	},
	data() {
		return {
			singlePx: 11,
			chooseValue: null,
			scrollLeft: 0,
			grid: 0,
			remainder: 10
		};
	},
	mounted() {
		setTimeout(() => {
			this.init();
		}, 50);
	},
	methods: {
		init() {
			this.createRuler();
			this.initChooseValue();
		},
		upx2px(val) {
			return uni.upx2px(val) + 'px';
		},
		// 创建尺
		createRuler() {
			const min = this.min || 0;
			const max = this.max || 0;
			const point = this.point || false;
			// 小数格式
			if (point) {
				this.grid = Math.floor(math.sub(max, min));
				// 放大10倍后计算
				let minM = math.mul(min, 10);
				let maxM = math.mul(max, 10);
				let remainder = math.sub(maxM, minM) % 10;
				this.remainder = remainder + 1;
			} else {
				this.grid = Math.ceil(math.sub(max, min) / 10);
				let remainder = math.sub(max, min) % 10;
				this.remainder = remainder + 1;
			}
		},
		initChooseValue() {
			const min = this.min || 0;
			const max = (this.max || 0) + 1;
			const single = this.singlePx;
			const point = this.point || false;
			if (this.defaultValue) {
				this.chooseValue = JSON.parse(JSON.stringify(Number(this.defaultValue)));
				setTimeout(() => {
					let scrollLeft = 0;
					if (point) {
						scrollLeft = math.mul(single, math.sub(math.mul(this.chooseValue, 10), min));
					} else {
						scrollLeft = math.mul(single, math.sub(this.chooseValue, min));
					}
					this.scrollLeft = scrollLeft;
				}, 40);
			} else {
				let halfNum = math.add(min + max) / 2;
				if (point) {
					this.chooseValue = halfNum.toFixed(1);
				} else {
					this.chooseValue = halfNum.toFixed(0);
				}
			}
		},
		// 滚动
		bindscroll(e) {
			let offset = e.detail.scrollLeft;
			let conversion = this.unitConversion(offset);
			this.chooseValue = conversion.number || 0;
			this.$emit('change', this.chooseValue);
			debounce(() => {
				this.scrollLeft = conversion.offsetLeftUpx || 0;
			}, 300);
		},
		unitConversion(offset) {
			const single = this.singlePx;
			const min = this.min || 0;
			let lastP = Math.round(offset / single);
			let number = lastP + min;
			if (this.point) {
				number = math.mul(0.1, number).toFixed(1);
			}
			let offsetLeftUpx = single * lastP;
			return {
				number: number,
				offsetLeftUpx: offsetLeftUpx
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.scroll-ascale {
	width: 100%;
	height: 172upx;
	background-color: #f8f9fb;
	position: relative;
	.choose-in-wrap {
		width: 44upx;
		position: absolute;
		left: calc(50% - 22upx);
		z-index: 1;
		.top {
			width: 0upx;
			height: 0upx;
			border-top: #0cc782 30upx solid;
			border-left: transparent 22upx solid;
			border-right: transparent 22upx solid;
		}
		.in {
			width: 4upx;
			height: 61upx;
			position: absolute;
			top: 18upx;
			left: calc(50% - 2upx);
			background-color: #0cc782;
		}
	}
	.scroll-view {
		height: 100%;
	}
	.scale-container {
		white-space: nowrap;
		display: flex;
		height: 100%;
		.scale-grip {
			position: relative;
			height: 100%;
			display: flex;
			.scale-item {
				position: relative;
				.scale-item-number {
					width: 80upx;
					font-size: 28upx;
					font-family: DINPro-Bold, DINPro;
					font-weight: bold;
					color: #737780;
					line-height: 40upx;
					height: 40upx;
					text-align: center;
					position: absolute;
					bottom: -42upx;
					left: calc(50% - 40upx);
				}
			}
		}
		.seat {
			flex-shrink: 0;
			box-sizing: border-box;
			width: 365upx;
		}
	}
}
</style>
